<script setup>
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'   //引入echarts核发模块
const chart = ref()
onMounted(()=>{
    chartIn()
})
function chartIn(){
    // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(chart.value);

      // 指定图表的配置项和数据
      var option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            legend: {
                data: ['出警里程', '出警次数', '巡逻次数'],
                textStyle:{
                    color:'#fff'
                }
            },
            xAxis: [
                {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow'
                }
                }
            ],
            yAxis: [
                {
                type: 'value',
                // name: 'Precipitation',
                min: 0,
                max: 500,
                interval: 100,
                },
                {
                type: 'value',
                name: '次数',
                min: 0,
                max: 50,
                interval: 10,
                splitLine:{
                    lineStyle:{
                        color:'#7892CE'
                    }
                }
                }
            ],
            series: [
                {
                name: '出警里程',
                type: 'bar',
                data: [
                    432,296,253,358,391,263,162
                ]
                },
                {
                name: '出警次数',
                type: 'line',
                data: [412,284,246,344,388,251,150
                    
                ]
                },
                {
                name: '巡逻次数',
                type: 'line',
                // yAxisIndex: 1,
                data: [359,234,201,323,336,222,122]
                }
            ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
}

</script>
<template>
    <div class="boxstyle" style="height: 300px">
        <div class="title">警车服务</div>
        <div ref="chart" style="width: 100%;height:300px;"></div>
        </div>
</template>
<style scoped>

</style>